<template>
  <div class="nav_wrapper">
    <nav
      class="navbar navbar-dark bg-primary justify-content-between mb-4 px-4"
    >
      <a href="#" class="navbar-brand">{{ user.title }}</a>
      <div v-if="!user.isLogin" class="list-inline mb-0 navbar_right">
        <button class="list-inline-item btn btn-outline-light">登录</button>
        <button class="list-inline-item btn btn-outline-light">注册</button>
      </div>
      <div v-else class="list-inline mb-0 navbar_right">
        <li class="list-inline-item">
          <Dropdown :title="`你好，${user.name}`">
            <DropdownItem>
              <a href="#" class="dropdown-item">哇哇哇哇</a>
            </DropdownItem>
              <DropdownItem>
              <a href="#" class="dropdown-item">哇哇哇哇</a>
            </DropdownItem>
              <DropdownItem :disabled="true">
              <a href="#" class="dropdown-item">哇哇哇哇</a>
            </DropdownItem>
              <DropdownItem>
              <a href="#" class="dropdown-item">哇哇哇哇</a>
            </DropdownItem>
            </Dropdown>
        </li>
      </div>
    </nav>
  </div>
</template>
<script lang="ts">
import { defineComponent, PropType } from 'vue'
import Dropdown from './Dropdown.vue'
import DropdownItem from './DropdownItem.vue'
export interface IUserProps {
  isLogin: boolean
  id?: string
  name?: string
  title?: string
}
export default defineComponent({
  name: 'GolbalHeader',
  components: {
    Dropdown,
    DropdownItem
  },
  props: {
    user: {
      type: Object as PropType<IUserProps>,
      requried: true
    }
  },
  setup(props) {
    return {

    }
  }
})
</script>
<style scoped></style>
